<template>
  <m-page>
    <!-- 历史账单页 -->
    <m-header title="历史账单"></m-header>
    <div class="history_bill">
      <div class="g-top">
        <div class="u-icon"></div>
        <p>融易通信用卡尾号（1234）</p>
      </div>
      <div class="g-center">
        <ynet-button @click="selectDate" round>{{billDate}}</ynet-button>
      </div>
      <div class="g-bottom" v-for="item in data" :key="item.year">
        <p class="g-bottom-year">{{item.year}}</p>
        <ynet-cell-item
          v-for="element in item.list"
          :key="element.id"
          :title="element.mouth+'账单'"
          :brief="'账单日'+element.date"
          @click="gotoDetail(item.year,element.id)"
          arrow
        >
          <span slot="right">
            {{element.amount_fl}}
            <ynet-amount :value="element.amount" :precision="2"></ynet-amount>
          </span>
        </ynet-cell-item>
      </div>
    </div>
  </m-page>
</template>

<script>
import { Amount, Button, CellItem } from "ynet-mobile";
export default {
  components: {
    [Button.name]: Button,
    [CellItem.name]: CellItem,
    [Amount.name]: Amount
  },
  data() {
    return {
      billDate: "全部", // 选择账单时间 默认为全部
      data: [
        // 历史账单数据
        {
          year: "2020年",
          list: [
            {
              id: 1,
              mouth: "2020年01月",
              date: "02-22",
              amount_fl: "-￥", //金额符号
              amount: 1920 //金额
            },
            {
              id: 2,
              mouth: "2020年01月",
              date: "01-22",
              amount_fl: "-￥",
              amount: 1920
            }
          ]
        },
        {
          year: "2019年",
          list: [
            {
              id: 1,
              mouth: "2019年12月",
              date: "12-22",
              amount_fl: "-￥",
              amount: 8762
            },
            {
              id: 2,
              mouth: "2019年11月",
              date: "11-22",
              amount_fl: "-￥",
              amount: 4320
            },
            {
              id: 3,
              mouth: "2019年10月",
              date: "10-22",
              amount_fl: "-￥",
              amount: 8310
            },
            {
              id: 4,
              mouth: "2019年09月",
              date: "09-22",
              amount_fl: "-￥",
              amount: 6540
            }
          ]
        }
      ]
    };
  },
  methods: {
    //页面跳转
    goto(item, params) {
      let url = `smallbusinessloan/rong_yi_tong_card/${item}`;
      app.api.pushWindow(url, params);
    },
    //日期选择
    //根据选择的日期查询某个阶段的账单
    selectDate() {
      app.api
        .showDatePicker({
          type: "3", // 控件类型 0:日期选择 1:时间选择  3:日期选择的选择年月两个选项 新加年月选项弹窗
          title: "请选择日期", // 标题
          minimumDate: "", // 最小选择日期
          maximumDate: "", // 最大选择日期
          dateFormat: "yyyy-MM", // 日期格式 默认 yyyy-MM-dd
          currentDate: "" // 当前选中日期 (当前type为3时 日期可能为空 如果不为空日期数据为yyyy-mm)
        })
        .then(res => {
          console.log(res);
          this.billDate = res.currentDate;
        });
    },
    // 查看详情
    // 点击前往账单详情页
    gotoDetail(time, id) {
      let detail = {};
      let params = {};
      for (let i = 0; i < this.data.length; i++) {
        if (time === this.data[i].year) {
          detail = this.data[i].list;
        }
      }
      for (let i = 0; i < detail.length; i++) {
        if (id === detail[i].id) {
          params = detail[i];
        }
      }
      console.log(params);
      this.goto("bill_detail.html", params);
    }
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {}
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>

